<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transform</title>

    <style>
        .container {
            width: 80%;
            height: 600px;
            margin: 0 auto;
            background-color: antiquewhite;
            padding-top: 30px;
        }

        .img-box {
            width: 200px;
            height: 200px;
            /* 打开父元素的3D效果 */
            transform-style: preserve-3d;
            /* 浏览器到视角的距离 */
            perspective: 1000px;
            margin: 0 auto;
        }

        .img-box img {
            width: 200px;
            /* border-radius: 50%; */
            /* translate(x,y) x--右移  y--下移 */
            /* transform: translate(0,-30px); */
            /* translate3d(x,y,z) x--右移 y--下移 z--靠近视角 */
            /* transform: translate3d(20px,30px,90px); */
            /* translateX 右移 translateY 下移 translateZ 靠近视角 */
            /* transform: translateX(20px); */
            /*  */
            /* scale(n) 宽高都扩大了n倍 */
            /* scale(n1,n2) 宽放大n1倍，高放大n2倍 */
            /* scaleX scaleY  */
            /* >1 放大 <1缩小 */
            /* transform: scaleZ(2) rotateX(20deg) ; */
            /* skew(x,y) x,y 在xy轴倾斜的角度 */
            /* skewX skewY */
            /* transform: skew(45deg); */
            /* rotate(deg)沿着盒子的中心进行旋转 顺时针旋转45deg*/
            /* transform: rotate(20deg); */
            /* rotateX 沿着x轴进行旋转 rotateY 沿着y轴旋转 */
            /* transform: rotateZ(20deg); */
            border-radius: 50%;
            /* transform: matrix(2,0,0,2,20,20); */
            /* transform 写多个是覆盖掉前面的属性 多种效果写成一个属性  */
        }

        img:hover {
            /* width: 800px; */
            /* height: 700px; */
            /* transform: rotate(90deg); */
            /* transition: width 2s linear 1s; */
            /* transition 作用于哪个属性 过渡的时间 过渡的动画效果 过渡的延迟时间 */
            transition: transform 2s linear 0s;
            /* transform: translateZ(200px); */
            transform: rotate(360deg);
            animation: rotateImg 3s linear 0s 1 normal none running;
        }

        /* 让元素从0度旋转360度 */
        @keyframes rotateImg {
            from{
                transform: rotate(0);
            }
            to{
                transform: rotate(300deg);
            }
        }

        .box {
            width: 200px;
            height: 200px;
            border: 2px solid black;
            border-radius: 50%;
            text-align: center;
            line-height: 200px;
        }

        .box:hover {
            /* animation: 绑定的动画名称 动画的时长 动画的效果 延迟时间 循环次数[1/infinite无数次] 是否正常方向[默认值normal正常方向] 停止时候的效果 动画的效果[默认值running运行] */
            animation: rotateImg 2s linear 0s infinite normal none running;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="img-box">
            <img src="../images/logo.png" alt="">
        </div>

        <div class="box">hello</div>
    </div>
</body>
</html>